<template>
    <div class="app-container">
        <levelbar></levelbar>
        <el-form label-width="130px" label-position='right' class="app-content" ref="dataForm">
            <div class="box">
                <div class="appTitle">会员打包订单详情</div>
                <div class="form-item-title">
                    <span class="title-level">商品信息</span>
                </div>
                <el-row class = "form-line">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="打包商品名称：">
                                <span>{{dataForm.packIncrementName || '--'}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="订单号：">
                                <span>{{dataForm.orderNum}}</span>
                            </el-form-item>
                        </el-col>
                        
                    </el-row>
                </el-row>
                <div class="form-item-title">
                    <span class="title-level">用户信息</span>
                </div>
                <el-row class = "form-line">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="支付人：">
                                <span>{{dataForm.payUserName || '--'}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="支付方式：">
                                <span>{{dataForm.payType}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="支付时间：">
                                <span>{{dataForm.createTime}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="购买月份：">
                                <span>{{dataForm.month}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="学校名称：">
                                <span>{{dataForm.schoolName || '--'}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="家长手机号：">
                                <span>{{dataForm.payUserPhone}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-row>
                
                <div class="form-item-title">
                    <span class="title-level">商品价格&分成</span>
                </div>
                <el-row class = "form-line">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="支付价格：">
                                <span>{{dataForm.money}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="使用积分：">
                                <span>{{dataForm.point}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="积分抵扣现金：">
                                <span>{{dataForm.deductMoney}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-row>
                <div class="table-box">
                    <p>订单详情：</p>
                    <el-table :data="dataList" style="width: 100%" border v-loading="loading">
                        <el-table-column label="类型" align="center" >
                            <template scope="scope">
                                <span>{{scope.row.typeName}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="价格（元）" align="center" >
                            <template scope="scope">
                                <span>{{scope.row.allMoney}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="e学云分成（元）" align="center" >
                            <template scope="scope">
                                <span>{{scope.row.eDividedMoney}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="经销商分成（元）" align="center" >
                            <template scope="scope">
                                <span>{{scope.row.agentDividedMoney}}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <div class="form-item-title">
                    <span class="title-level">经销商</span>
                </div>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="经销商：">
                            <span>{{dataForm.orgUserName}}</span>
                        </el-form-item>
                    </el-col>
                    
                </el-row>
            </div>
            <div class="footer">
                <el-button @click="resetForm">返回</el-button>
            </div>
        </el-form>   
    </div>
</template>

<script>
import {getMemberShipPackPayDetailById} from 'api/memberMangement';
import Levelbar from '../layout/Levelbar';
export default{
    name: 'checkDetails',
    components: {Levelbar},
    data() {
        return {
            pId: '',
            fSchoolId: '',
            dataForm: {
                packIncrementName: '',
                orderNum: '',
                payUserName: '',
                payType: '',
                createTime: '',
                month: '',
                schoolName: '',
                payUserPhone: '',
                money: '',
                vipMoney: '',
                vipDiscoun: '',
                vipDividedMoney: '',
                keepPeaceMoney: '',
                keepPeaceDividedMoney: '',
                broadcastMoney: '',
                broadcastDividedMoney: '',
                point: '',
                deductMoney: '',
                orgUserName: ''
            },
            loading: false,
            dataList: []
        }
        
    },
    created() {
        this.getSettlement()
    },
    methods: {
        getSettlement() {
            this.loading = true;
            getMemberShipPackPayDetailById(this.$route.params.id.split(';')[0]).then(res => {
                let item = res.data.content;
                this.dataForm.packIncrementName = this.judge(item.packIncrementName);
                this.dataForm.orderNum = this.judge(item.orderNum);
                this.dataForm.payUserName = this.judge(item.payUserName);
                this.dataForm.payType = item.payType=='1' ? 'e学云' : item.payType=='2' ? '支付宝' : '微信';
                this.dataForm.createTime = this.judge(item.createTime);
                this.dataForm.month = this.judge(item.month);
                this.dataForm.schoolName = this.judge(item.schoolName);
                this.dataForm.payUserPhone = this.judge(item.payUserPhone);
                this.dataForm.money = this.judgeMoney(item.money);
                this.dataForm.vipMoney = this.judgeMoney(item.vipMoney);
                this.dataForm.vipDividedMoney = this.judgeMoney(item.vipDividedMoney);
                this.dataForm.keepPeaceMoney = this.judgeMoney(item.keepPeaceMoney);
                this.dataForm.keepPeaceDividedMoney = this.judgeMoney(item.keepPeaceDividedMoney);
                this.dataForm.broadcastMoney = this.judgeMoney(item.broadcastMoney);
                this.dataForm.broadcastDividedMoney = this.judgeMoney(item.broadcastDividedMoney);
                this.dataForm.point = this.judge(item.point);
                this.dataForm.deductMoney = this.judgeMoney(item.deductMoney);
                this.dataForm.orgUserName = this.$route.params.id.split(';')[1]=='null' ? '--' : this.$route.params.id.split(';')[1];
                this.pushToArr('会员', item.vipMoney, item.vipDividedMoney);           
                switch (item.packIncrementId) {
                    case 123561:
                        this.pushToArr('报平安', item.keepPeaceMoney, item.keepPeaceDividedMoney);
                        break;
                    case 123562:
                        this.pushToArr('e直播', item.broadcastMoney, item.broadcastDividedMoney);
                        break;
                    default:
                        this.pushToArr('报平安', item.keepPeaceMoney, item.keepPeaceDividedMoney);
                        this.pushToArr('e直播', item.broadcastMoney, item.broadcastDividedMoney);
                }         
                this.loading = false;
            })
        },
        pushToArr(name, Money, agentMoney) {
            let newObj={};
            newObj.typeName = name;
            newObj.allMoney = Number(Money).toFixed(2);            
            newObj.agentDividedMoney = Number(agentMoney).toFixed(2);
            newObj.eDividedMoney = (Number(Money).toFixed(2) - Number(agentMoney).toFixed(2)).toFixed(2);
            this.dataList.push(newObj);
        },
        judge(res) {
            if (res || res==0) {
                return res
            } else {
                return '--'
            }
        },
        judgeMoney(res) {
            if (res || res==0) {
                return res.toFixed(2) +' 元';
            } else {
                return '--';
            }
        },

        resetForm() {
            window.history.back();
        }
    
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    .app-levelbar {
        height: 35px;
    }
    .el-tabs{
        margin-top:22px;
        background: #fff;
        // box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.1); 
        // -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    }
    .tableBox{
        // margin-top:22px;
        padding: 0 20px 30px;
        background: #fff;
        box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.1); 
        -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    }
    .table-title{
        display: flex;
        justify-content: space-between;
        padding: 20px 0;
        .table-title-span {
            flex: 1;
            line-height: 36px;
        }
    }
    .el-form{
        .box{
            padding:0 50px;
        }
        box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        background:#fff;
        .appTop{
            padding:60px 0 30px 0px;
            p{
                margin-left:15px;
            }
        }
        .appTop p{
            margin-left:15px;
        }
        .el-form-item{
            margin-top:8px;
        }
        .appTop:before {
            content: '';           
            float: left;
            border-radius: 2px;
            width:4px;height:20px;
            background:#ff5e2c;
            margin-top:1px;
        }
        .addContinue{
            margin-left:60px;
            margin-top:20px
        }
        .appTitle{
            padding-top:8px;
            text-align: center;
            font-size: 18px;
            color: #333;
            line-height: 72px;
            font-weight: bold;
            font-family: Microsoft YaHei;
            border-bottom: 1px solid #ddd;
        }
        .box{
            padding:0 50px;
            .form-line{      
                // border-bottom: 1px solid #ddd; 
                margin-bottom: 14px;
                // .el-form-item{
                //     margin-top:22px;
                // }      
            }
        }
        .table-box{
            padding:0 48px;
            p {
                padding-bottom: 20px;
                font-size: 14px;
            }
        }
        .form-item-title {
            margin: 40px 0;
            font-size: 14px;
            color: #333;
            line-height: 14px;
            border-left: 4px solid #ff5e2c;
            text-indent: 16px;
           
          .note-css {
            vertical-align: middle;
            display: inline-block;
            width: 4px;
            height: 14px;
            margin-right: 26px;
            border-left: 3px solid #ff5e2c;
          }
        }
        .footer {
          //float: right;
          text-align: center;
          padding: 30px 0 50px 0;
        }
        .settelColor{
            color:#ff5e2c;
        }
        .settelBig{
            font-size:16px;
            font-weight:600;
        }
        
    }
    
}

</style>